<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/app.css" />
		<style>
			.un{
				font-size: 16px;
				line-height: 20px;
			}
			.bd-bottom{
				border-bottom: 1px #ccc solid;
			}
			.bd-top{
				border-top: 1px #ccc solid;
			}
			.btn-num{
				float: left;
				margin-left: 15px;
				margin-top: 10px;
				margin-bottom: 10px;
				padding: 3px;
				font-size: 14px;
				line-height: 16px;
				text-align: center;
				width: 80px;
				background: #CCCCCC;
			}
			#about{
				position: relative;
			}
			.num-zan{
				position: absolute;
				font-size: 14px;
				right: 10px;
			}
			.icon-zan{
				font-size: 16px;
				margin-right: 5px;
			}
		</style>
	</head>

	<body id='app'>
		<ul class="mui-table-view" @tap="goPage('mycenter')">
			<li class="mui-table-view-cell">
				<a id="about"  style="padding: 15px;">
					<img class="mui-media-object mui-pull-left head-img" :src="uinfo.HeadPortrait" id="user-head" style="border-radius: 50%;width: 60px;height: 60px;max-width: 80px;">
					<div id="logined" style="display: block;">
						<div class="mui-media-body" style="position: relative;">
							<div class="num-zan"><i class="mui-icon iconfont icon-zan"></i><span id="zan-num">{{uinfo.LikeCount}}</span></div>
							<div class="un bd-bottom" id="user-name">{{uinfo.Username}}</div>
							<div @tap="goPage('follow', 0, $event)" class="btn-num">
								<p>{{uinfo.MyFollowCount}}</p>
								<p>我关注的人</p>
							</div>
							<div @tap='goPage("follow", 1, $event)' class="btn-num">
								<p>{{uinfo.FollowMeCount}}</p>
								<p>关注我的人</p>
							</div>
						</div>
						<div class="detail bd-top" style="margin-top:10px;padding-top:5px;">
							<p>{{uinfo.School}} {{uinfo.Department}} {{uinfo.Class}}</p>
							<p>{{uinfo.Title}}</p>
						</div>
					</div>		
				</a>
			</li>
		</ul>
		<ul class="mui-table-view  mui-table-view-chevron" style="margin-top: 35px">
			<li class="mui-table-view-cell" url="/page/mycenter/myLike.html" style="margin-top: 15px;">
				<a @tap='goPage("likeCollect",0)' class="mui-navigate-right mui-icon iconfont icon-zan" style="color:#0072dc;font-size:20px ;line-height: 22px;">
						<span  style="margin-left:5px;font-size:16px;color: #000000;">我的赞</span>
					</a>
			</li>
			<li class="mui-table-view-cell" url="/page/mycenter/myComment.html">
				<a @tap='goPage("likeCollect",1)' class="mui-navigate-right mui-icon iconfont icon-wbzai" style="color:#0072dc;font-size:20px ;line-height: 22px;">
						<span style="margin-left:5px;font-size:16px;color: #000000;">我的收藏</span>
					</a>
			</li>
		</ul>
		<ul class="mui-table-view  mui-table-view-chevron" style="margin-top: 35px">
			<li class="mui-table-view-cell" url="/page/mycenter/myLike.html" style="margin-top: 15px;">
				<a @tap='goPage("admin")' class="mui-navigate-right mui-icon iconfont icon-userqun" style="color:#0072dc;font-size:20px ;line-height: 22px;">
						<span style="margin-left:5px;font-size:16px;color: #000000;">我管理的圈子</span>
					</a>
			</li>
		</ul>
		<ul class="mui-table-view  mui-table-view-chevron" style="margin-top: 35px">
			<li class="mui-table-view-cell" url="/page/mycenter/myLike.html" style="margin-top: 15px;">
				<a @tap='goPage("setting")' class="mui-navigate-right mui-icon iconfont icon-set" style="color:#0072dc;font-size:20px ;line-height: 22px;">
						<span style="margin-left:5px;font-size:16px;color: #000000;">设置</span>
					</a>
			</li>
		</ul>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var vm = new Vue({
				el:'#app',
				data:{
					uinfo: persistent.uinfo(),
				},
				methods:{
					goPage:function (type ,data, e) {
						if(type==='mycenter'){
							openPage('../mycenter/userInfo.html','userInfo');
						}else if(type==='follow'){
							openPage(data===0?'../mycenter/follow.html':'../mycenter/followme.html','follow',{tab:data});
							e.stopPropagation();
							e.preventDefault();
						}else if(type==='likeCollect'){
							openPage(data === 0?'../mycenter/likeCollect.html':'../mycenter/likeCollectCollect.html','likeCollect',{tab:data})
						}else if(type==='setting'){
							openPage('../mycenter/configuration.html','configuration')
						}else if(type==='admin'){
							openPage('../mycenter/adminCircle.html','adminCircle');
						}
					}
				}
			});
			document.addEventListener('reload',function () {
				vm.uinfo=persistent.uinfo();
			});
		</script>
	</body>

</html>